div.city {
   width: 100vw;
   background-color: #f5f5f5;
    div.cityHead {
        width: 100vw;
        height: 46px;
        background-color:#f72409;
        display: flex;
        padding: 0 10px;
        box-sizing: border-box;
        justify-content: space-between;
        line-height: 46px;
      div.headLeft {
          
        i.iconfont.icon-zuojiantou {
           font-size: 20px;
           color: #fff;
        }
      }
  
      div.headRight {
        span {
  color: #fff;
  font-size: 20px;
        }
      }
    }
    div.city-main {
        height:calc(100vh - 46px);
        overflow-y: scroll;
        div.city-tip {
            background-color: #fff;
            height: 45px;
         align-items: center;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e4e4e4;
          p {
         color: #9f9f9f;
         font-size: 12px;
          }
        }
      
        div.city-guess {
            background-color: #fff;
            height: 45px;
            padding: 0 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e4e4e4;
            align-items: center;
           
          a {
            span {
         font-size: 18px;
         color: #3190e8;
            }
          }
      
          i.iconfont.icon-jiantou {
        font-size: 16px;
          }
        }
        div.city-hot {
            background-color: #fff;
            width: 100vw;
            margin-top: 10px;
            div.city-hot-title {
              height: 36px;
              line-height: 36px;
              text-indent: 10px;
              border-top: 2px solid #e4e4e4;
              border-bottom: 1px solid #e4e4e4;
              p {
           color: #666;
           font-size: 12px;
           font-weight: 400;
              }
            }
          
            div.city-hotlist {
              ul.city-hot-ul{
                  width: 100vw;
                  display: flex;
                  flex-wrap: wrap;
                li.hot-city-name {
                    width: 25%;
                    text-align: center;
                    font-size: 14px;
                     color: #3190e8;
                     height: 40px;
                     border-bottom: 1px solid #e4e4e4;
                    border-right: 1px solid #e4e4e4;
                    box-sizing: border-box;
                    line-height: 40px;
                }
              }
            }
          }
          div.city-group {
            background-color: #fff;
            width: 100vw;
            margin-top: 10px;
            div.city-group-title {
                height: 36px;
                line-height: 36px;
                text-indent: 10px;
                border-top: 2px solid #e4e4e4;
                border-bottom: 1px solid #e4e4e4;
              p {
                color: #666;
                font-size: 12px;
                font-weight: 400;
              }
            }
          
            div.city-grouplist {
              ul.city-group-ul {
                width: 100vw;
                display: flex;
                flex-wrap: wrap;
                li.group-city-name {
                    width: 25%;
                    text-align: center;
                    font-size: 14px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                     height: 40px;
                     border-bottom: 1px solid #e4e4e4;
                    border-right: 1px solid #e4e4e4;
                    box-sizing: border-box;
                    line-height: 40px;
                }
              }
            }
          }
      }
  }